<template>
  <div>
    <el-row class="m-b p-b">
      <div class="form-box">
        <SearchComp label-width="80px" :searchData="searchData" :searchForm="searchForm" :searchAction="searchHandle" />
      </div>
    </el-row>
    <div>
      <TableCompEle v-loading="loading" :tableData="tableData" :isSelect="false" :isPageIndex="true" :tableConfig="tableConfig"
        :queryParams="queryParams" @getPagination="initData" :isShowPage="true" />
    </div>
  </div>
</template>

<script>
// import { devLog } from '@/api/log.js'
// import { roleSelect } from '@/api/systemRole'
export default {
  name: 'LogUserLog',
  data() {
    return {
      loading: false,
      searchForm: {
        changeMethod: () => {
          this.queryParams.currentPage = 1;
          this.paginationSize();
        },
        formData: [
          {
            type: 'Input',
            label: '用户名',
            prop: 'userName',
            clearable: true,
            placeholder: '请输入用户名',
            change: () => {
              this.paginationSize()
            }
          },
          {
            type: 'Select',
            label: '角色:',
            prop: 'roleId',
            filterable: true,
            clearable: true,
            placeholder: '请选择角色',
            options: [],
            sysKeys: { value: 'roleId', label: 'roleName' },
            change: () => this.paginationSize()
          }
        ]
      },
      searchHandle: [
        {
          label: '重置',
          handle: () => this.reset()
        }
      ],
      searchData: {
        slType: null,
        slOperator: null,
        slOperatorTime: null
      },
      queryParams: {
        total: 0,
        currentPage: 1,
        pageSize: 10,
      },
      tableData: [],
      tableConfig: [
        {
          prop: 'userName',
          label: '用户姓名',
        },
        {
          prop: 'userRole',
          label: '用户角色'
        },
        {
          prop: 'totalVisits',
          label: '总访问量'
        },
        {
          prop: 'lastVisitedDate',
          label: '最近访问时间'
        },
        {
          prop: 'lastVisitedDurationTime',
          label: '最近访问时长'
        }
      ]
    }
  },
  created() {
    this.initData()
    // this.initRole()
  },
  methods: {
    // initRole() {
    //   roleSelect().then((res) => {
    //     this.roles = res.data
    //     this.searchForm.formData[1].options = res.data
    //   }).catch(err => {
    //     console.log(err)
    //   })
    // },
    initData() {
      let res = {
        "code": 200,
        "message": "查询成功",
        "data": {
          "pageSize": 10,
          "totalPage": 1,
          "total": 1,
          "list": [
            {
              "id": null,
              "userId": 1,
              "totalVisits": 33,
              "lastVisitedDate": "2024-04-19 10:36:44",
              "lastVisitedDuration": 1713494203754,
              "totalVisitedDuration": 10266121304782,
              "userName": "admin",
              "userRole": null,
              "lastVisitedDurationTime": "02:36:43",
              "totalVisitedDurationTime": "20:21:44"
            }
          ],
          "page": 1
        }
      }
      // this.loading = true
      // const params = {
      //   currentPage: this.queryParams.currentPage,
      //   pageSize: this.queryParams.pageSize,
      //   userName: this.searchData.userName,
      //   roleId: this.searchData.roleId
      // }
      // devLog(params).then((res) => {
      this.tableData = res.data.list
      this.queryParams.total = res.data.total
      // })
      //   .finally(() => {
      //     // this.loading = false
      //   })
    },
    paginationSize() {
      this.queryParams.currentPage = 1
      this.initData()
    },
    reset() {
      this.searchData = {
        slType: null,
        slOperator: null,
        slOperatorTime: null
      }
      this.paginationSize()
    }
  }
}
</script>

<style></style>
